<template>
	<div>
		<el-tabs v-model="activeName">
			<el-tab-pane name="labels" label="标签管理">
				<el-button type="primary" @click="showAddLabelDialog">创建标签</el-button>
				<br />
				<add-label :labelData="modifiedLabel" :visible="addLabelDialogIsShowing" @close="onAddLabelClose" @updateLabelSuccess="onUpdateLabelSuccess"></add-label>
				<bind-members :tableData="bindMembersDialogData" :visible="showBindMembersDialog" @close="onBindMembersDialogClose"></bind-members>
				<br />
				<el-table :data="labelList" stripe border >
					<el-table-column label="名称" prop="name" align="center"></el-table-column>
					<el-table-column label="操作" align="center">
						<template v-slot="scope">
							<el-button size="mini" type="primary" @click="showBindUsers(scope.row)">标签成员</el-button>
							<el-button size="mini" type="primary" @click="modifyLabel(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="showDeleteLabelDialog($event, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<br />
				<page-size :pages="tablePages" @changeCurrentPage="changeCurrentPage" @changePageSize="changePageSize"></page-size>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import AddLabel from './AddLabel.vue';
import BindMembers from './BindMembers.vue';
import PageSize from '@/views/components/PageSize.vue'
import { getBizLabelList, deleteBizLabelById } from '@/api/api';
import { forceBtnBlur } from '@/utils/MyVueUtil.js'

export default {
	components: {
		AddLabel,
		BindMembers,
		PageSize
	},

	data(){
		return {
			activeName: 'labels',
			addLabelDialogIsShowing: false,
			showBindMembersDialog: false,
			labelList: [],
			tablePages: {
				total: 0,
				page: 1,
				pageSize: 10
			},
			modifiedLabel: undefined,
			bindMembersDialogData: []
		}
	},

	mounted() {
		this.refreshLabelList();
	},

	methods: {
		formatMembers(row) {
			if (row.users && row.users.length > 0){
				let result = '';
				row.users.forEach(value => {
					result += value.userName + "，";
				});
				return result.substring(0, result.length - 1);
			} else {
				return '-';
			}
		},

		showBindUsers(row) {
			this.bindMembersDialogData = [{name: row.name, members: this.formatMembers(row)}];
			this.showBindMembersDialog = true;
		},

		showAddLabelDialog() {
			this.modifiedLabel = undefined;
			this.addLabelDialogIsShowing = true;
		},

		onAddLabelClose() {
			this.addLabelDialogIsShowing = false;
		},

		onBindMembersDialogClose() {
			this.showBindMembersDialog = false;
		},

		refreshLabelList() {
			getBizLabelList(this.tablePages).then(res => {
				if (res.data && res.data.code === 200){
					this.tablePages.total = res.data.data.count;
					this.labelList = res.data.data.data;
					if (this.labelList.length === 0 && this.tablePages.page > 1){
						this.tablePages.page -= 1;
						this.refreshLabelList();
					}
				} 
			});
		},

		onUpdateLabelSuccess(){
			this.refreshLabelList();
		},

		modifyLabel(row) {
			this.modifiedLabel = row;
			this.addLabelDialogIsShowing = true;
		},

		showDeleteLabelDialog(event, row) {
			forceBtnBlur(event);
			// <b><i style="color: deepskyblue; font-size: 17px;">${row.name}</i></b>
			this.$confirm(`此操作将永久删除标签 ${row.name}, 是否继续?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				dangerouslyUseHTMLString: false
			}).then(() => {
				deleteBizLabelById(row.id).then(res => {
					if (res.data && res.data.code === 200){
						this.$message.success( '删除成功');
						this.refreshLabelList();
					} else {
						this.$message.error('删除失败！');
					}
				}).catch(error => {
					console.log('delete label failure:', error);
					switch (error.code){
						case 1000:
							this.$message.error('系统错误');
							break;
						case 1101:
							this.$message.error('业务标签不存在');
							break;
						case 6010:
							this.$message.error('删除失败！标签正在使用中！！！');
							break;
						default:
							this.$message.error(error);
							break;
					}
				});
			}).catch(() => {
				this.$message.info('已取消删除');
			});
		},

		changeCurrentPage(page) {
			this.tablePages.page = page;
			this.refreshLabelList();
		},

		changePageSize(pageSize) {
			this.tablePages.pageSize = pageSize;
			this.refreshLabelList();
		}
	}
}
</script>

<style lang="less">
</style>